<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cell Merge(单元格合并)</title>
		<link href="../contents/bootstrap.min.css" rel="stylesheet"/>
		<link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
		<style type="text/css">
			.wj-flexgrid {
			  max-height: 200px;
			  margin-bottom: 12px;
			}
			
			body {
			  margin-bottom: 24px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div id="grid"></div>
		</div>
	</body>
	<script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
	<script type="text/javascript">
		document.readyState === "complete"?init():window.onload = init;
		
		function init(){
			var countries = 'US,Germany,UK,Japan,China,SG'.split(',');
			var data = [];
			for (var i = 0; i < 20; i++) {
				data.push({
					id: i,
					country: countries[i % countries.length],
					active: i % 5 != 0,
					downloads: Math.round(Math.random() * 200000),
					sales: Math.random() * 100000,
					expenses: Math.random() * 50000
				});
			}
			
			let grid = new wijmo.grid.FlexGrid("#grid", {
				allowMerging: "Cells",
				isReadOnly: true,
				autoGenerateColumns: false,
				columns:[
					{ binding: 'country', header: 'Country', allowMerging: true },
					{ binding: 'sales', header: 'Sales', format: 'n2' },
					{ binding: 'expenses', header: 'Expenses', format: 'n2' },
					{ binding: 'active', header: 'Active', allowMerging: true }
				],
				itemsSource: new wijmo.collections.CollectionView(data, {
					sortDescriptions:['country', 'active']
				})
			});
		}
	</script>
</html>